<!--基础折线图-->

<template>
  <div class="w-h-full">
    <div v-if="shade" class="shade"></div>
    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import BaseLineChart from "./BaseLineChart.js";

  const _this = {
    name: 'BaseLineChart',
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.2',
      configDataTemp: Object.assign({

        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          grid: PnDesigner.buildGridConfigData(),
          legend: PnDesigner.buildLegendConfigData(),
          tooltip: PnDesigner.buildTooltipConfigData(),
          xAxis: PnDesigner.buildXAxisConfigData({
            boundaryGap: false
          }),
          yAxis: PnDesigner.buildYAxisConfigData(),
          series: [BaseLineChart.buildSeriesObj('系列1'), BaseLineChart.buildSeriesObj('系列2')]
        },

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '类目'
          },
          {
            field: 'value',
            remark: '值'
          },
          {
            field: 'series',
            remark: '系列'
          }
        ],
        ds_resultObj: [
          {
            'name': '2012年',
            'value': 451,
            'series': '系列1'
          },
          {
            'name': '2013年',
            'value': 352,
            'series': '系列1'
          },
          {
            'name': '2014年',
            'value': 303,
            'series': '系列1'
          },
          {
            'name': '2015年',
            'value': 534,
            'series': '系列1'
          },
          {
            'name': '2016年',
            'value': 95,
            'series': '系列1'
          },
          {
            'name': '2012年',
            'value': 360,
            'series': '系列2'
          },
          {
            'name': '2013年',
            'value': 545,
            'series': '系列2'
          },
          {
            'name': '2014年',
            'value': 80,
            'series': '系列2'
          },
          {
            'name': '2015年',
            'value': 192,
            'series': '系列2'
          },
          {
            'name': '2016年',
            'value': 330,
            'series': '系列2'
          }
        ],
        ds_useFilter: true,
        ds_useTimer: true,
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {

      this.init();

      this.setTimer(() => {
        this.init()
      })
    },
    methods: {

      init() {
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      },

    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          grid: PnDesigner.buildGridChartOption(this.component.compConfigData.chartOption.grid),
          legend: PnDesigner.buildLegendChartOption(this.component.compConfigData.chartOption.legend),
          tooltip: PnDesigner.buildTooltipChartOption(this.component.compConfigData.chartOption.tooltip),
          xAxis: [
            PnDesigner.buildXAxisChartOption(this.component.compConfigData.chartOption.xAxis)
          ],
          yAxis: [
            PnDesigner.buildYAxisChartOption(this.component.compConfigData.chartOption.yAxis)
          ],
          series: []
        };

        // 初始化横坐标标签
        this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'name').forEach(item => {
          option.xAxis[0].data.push(item.type)
        });

        /*this.component.compConfigData.chartOption.series.forEach((item, index) => {
          let groupItem = this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'series')[index];
          if (groupItem) {
            option.series.push({
              name: item.name,
              type: 'line',
              smooth: item.smooth, //是否平滑曲线显示
              //symbol: 'circle',  // 默认是空心圆（中间是白色的），改成实心圆
              symbolSize: item.symbolSize,
              itemStyle: {
                color: item.itemStyle.color
              },
              areaStyle: { //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new this.$Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: item.areaStyle.normal.startColor ? item.areaStyle.normal.startColor : this.currentEchartThemeColors[2],
                  },
                    {
                      offset: 1,
                      color: item.areaStyle.normal.endColor ? item.areaStyle.normal.endColor : this.currentEchartThemeColors[6]
                    }
                  ], false),
                  shadowColor: item.areaStyle.normal.shadowColor, //阴影颜色
                  shadowBlur: item.areaStyle.normal.shadowBlur //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                }
              },
              data: groupItem.list
            });
          }
          option.legend.data.push(item.name)
        });*/

        this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'series').forEach((resultObjItem, index) => {
          if (resultObjItem) {
            let item = this.component.compConfigData.chartOption.series[index];
            if (item) {
              option.series.push({
                name: item.name ? item.name : resultObjItem.type,
                type: item.type,
                label: {
                  show: item.label.show,
                  position: item.label.position,
                  color: item.label.color,
                  fontSize: item.label.fontSize
                },
                itemStyle: {
                  color: item.itemStyle.color,
                  borderColor: item.itemStyle.borderColor,
                  borderWidth: item.itemStyle.borderWidth,
                  borderType: item.itemStyle.borderType
                },
                lineStyle: {
                  type: item.lineStyle.type,
                  width: item.lineStyle.width
                },
                areaStyle: item.areaStyle.show ? { //区域填充样式
                  normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new this.$Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: item.areaStyle.normal.startColor ? item.areaStyle.normal.startColor : this.currentEchartThemeColors[0],
                    },
                      {
                        offset: 1,
                        color: item.areaStyle.normal.endColor ? item.areaStyle.normal.endColor : this.currentEchartThemeColors[7]
                      }
                    ], false),
                    shadowColor: item.areaStyle.normal.shadowColor, //阴影颜色
                    shadowBlur: item.areaStyle.normal.shadowBlur, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    opacity: item.areaStyle.normal.opacity
                  }
                } : null,
                smooth: item.smooth, //平滑曲线显示
                symbol: item.symbol, //标记的图形为实心圆
                symbolSize: item.symbolSize, //标记的大小
                markLine: PnDesigner.buildMarkLineChartOption(item.markLine),
                markPoint: PnDesigner.buildMarkPointChartOption(item.markPoint),
                data: resultObjItem.list
              });
              option.legend.data.push(item.name ? item.name : resultObjItem.type)
            }else {
              option.series.push(BaseLineChart.buildDefaultSeriesObj(resultObjItem.type, resultObjItem.list))
              option.legend.data.push(resultObjItem.type)
            }
          }
        })

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    },
    watch: {}
  };

  export default _this
</script>

<style scoped>

</style>
